<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>生命周期(新)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../../newjs/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../../newjs/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../../newjs/babel.min.js"></script>
	<script type="text/babel">
		//创建组件
		class Count extends React.Component{
			/* 
                构造器：constructor
                组件将要挂载：componentWillMount (即将发布版本需加前缀UNSAFE_)
                挂载：ReactDOM.render(<demo/>,document.getElementById(‘test’))
                组件挂载完毕：componentDidMount
                组件将要卸载：componentWillUnmount
                卸载：ReactDOM.unmountComponentAtNode(document.getElementById(‘test’))
                组件是否应该被更新：shouldComponentUpdate  默认返回true（控制组件更新的阀门）
                组件将要更新：componentWillUpdate (即将发布版本需加前缀UNSAFE_)
                组件更新完毕：componentDidUpdate(preProps.preState) 之前的
                组件将要接收props：componentWillReceiveProps 第一次传的不算，更改接收新的才算 (即将发布版本需加前缀UNSAFE_)
                在启用异步渲染后，过时的组件生命周期可能会出现bug，需要加前缀UNSAFE_
                新增两个生命周期钩子：
                （1）从props得到一个派生的状态：static getDerivedStateFromProps(props,state,value) 
                    1.是静态的  需要加static
                    2.需要有返回值  返回一个状态对象会影响状态更新 /null
                    3.如果state中所有的值都取决于props，可以使用
                （2）在更新前获取快照：getSnapshotBeforeUpdate(prevProps.prevState)  需要有返回值  返回快照或者null
            */
			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}
			//加1按钮的回调
			add = ()=>{
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}
			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}
			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}
			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}
			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}
			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}
			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}
			//组件更新完毕的钩子
			componentDidUpdate(preProps,preState,snapshotValue){
				console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
			}
			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
	</script>
</body>
</html>